*{
    margin: 0;
    padding: 0;
    color: rgba(225,225,225,.8);
    font-family: poppin, 'PingFang SC', Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif;
}
html, body{
    width: 100%;
    height: 100%;
    background-color: #777973;
}
.hide{
    display: none;
}
::-webkit-scrollbar {
    width: 5px;
} /* 这是针对缺省样式 (必须的) */
::-webkit-scrollbar-track {
    /*background-color: rgba(0, 0, 0, 0.1);*/
    border-radius: 5px;
} /* 滚动条的滑轨背景颜色 */

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.6);
} /* 滑块颜色 */

/*::-webkit-scrollbar-button {*/
    /*background-color: #7c2929;*/
/*} !* 滑轨两头的监听按钮颜色 *!*/

::-webkit-scrollbar-corner {
    background-color: black;
} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
/*渐变*/
body {
    background-color: #000;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ba43a8+0,ea4fce+62,537bad+100&amp;0.38+0,0.17+61,0.8+100 */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url();
    background: -moz-linear-gradient(-45deg,  rgba(186,67,168,0.38) 0%, rgba(233,79,205,0.17) 61%, rgba(234,79,206,0.19) 62%, rgba(83,123,173,0.8) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(186,67,168,0.38)), color-stop(61%,rgba(233,79,205,0.17)), color-stop(62%,rgba(234,79,206,0.19)), color-stop(100%,rgba(83,123,173,0.8))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* IE10+ */
    background: linear-gradient(135deg,  rgba(186,67,168,0.38) 0%,rgba(233,79,205,0.17) 61%,rgba(234,79,206,0.19) 62%,rgba(83,123,173,0.8) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61ba43a8', endColorstr='#cc537bad',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

    overflow: hidden;
}
.blue_mask{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.1;
    background-color: #000;
    overflow: hidden;
}
.img_mask{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.1;
    overflow: hidden;
    -webkit-filter: blur(5px); /* Chrome, Opera */
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
/*头部log*/
.music_header{
    position: absolute;
    width: 100%;
    height: 50px;
    top: 0;
    left: 0;
}
.music_header .log{
    display: inline-block;
    margin: 10px 15px;
    font-size: 24px;
    cursor: pointer;
}
.music_header .log:hover{
    color: #fff;
}
/*中间主体*/
.music_content{
    position: absolute;
    top: 50px;
    bottom: 100px;
    width: 100%;
}
.music_center{
    width: 100%;
    height: 100%;
    max-width: 1120px;
    margin: 0 auto;
}
.music_left{
    padding-left: 5px;
    padding-right: -5px;
    width: 65%;
    float: left;
    height: 100%;
    position: relative;
}
.music_right{
    padding-right: 5px;
    padding-left: -5px;
    width: 28%;
    float: right;
    height: 100%;
    position: relative;
}
/*左侧标签列表与搜索*/
.tab_list{
    height: 35px;
}
.tab_list .list ul{
    list-style: none;
}
.tab_list .list ul li{
    display: inline-block;
    padding: 7px 15px;
    margin-right: 15px;
    border: 1px solid rgba(225,225,225,.8);
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
}
.tab_list .list ul li:hover{
    border: 1px solid #fff;
    color: #fff;
}
.tab_list .search{
    width: 100%;
    position: relative;
}
.tab_list .search span{
    background: #fff;
    padding: 7px 0;
    vertical-align: middle;
}
.tab_list .search .search_input{
    border: none;
    padding-left: 2%;
    width: 68%;
    outline: none;
    font-size: 16px;
    color: #333;
}
.tab_list .search .search_close{
    text-align: center;
    padding: 7px 5px;
    cursor: pointer;
}
.tab_list .search .search_button{
    text-align: center;
    padding: 7px 50px;
    background: #eee;
    color: #333333;
    cursor: pointer;
}
/*音乐列表*/
.data_music{
    width: 100%;
    position: absolute;
    top: 45px;
    bottom: 0;
    margin-top: 15px;
    overflow-y: scroll;
}
.data_music .list_item{
    width: 100%;
    height: 50px;
    line-height: 50px;

    border-bottom: 1px solid rgba(150,150,150,.1);
    font-size: 15px;
}
.data_music .music_auth{
    display: block;
    width: 150px;
    height: 100%;
    float: right;
    overflow: hidden;
}
.data_music .auth_name{
    display: block;
    width: 150px;
    height: 100%;
    float: right;
}
.data_music .music_name{
    display: block;
    height: 100%;
    margin-left: 50px;
    margin-right: 300px;
    position: relative;
}
.data_music .list_item:hover .list_menu{
    display: block;
}
.data_music .list_menu{
    position: absolute;
    right: 10px;
    top: 0px;
    display: none;
}
.data_music .list_menu span{
    cursor: pointer;
}
.data_music .list_menu span:hover{
    color: #fff;
}
.data_music .music_no{
    display: block;
    float: left;
    width: 50px;
    text-align: center;
    height: 100%;
}
/*右侧歌曲封面与歌词*/
.music_img{
    position: relative;
    margin: 0 auto;
    width: 186px;
    height: 186px;
}
.music_img:after{
    content: "";
    position: absolute;
    left: 9px;
    top: 0;
    width: 201px;
    height: 180px;
    background: url("/img/album_cover_player.png");
}
.music_lyric{
    margin:  0 5%;
    padding: 25px 5%;
    position: absolute;
    width: 80%;
    top: 200px;
    bottom: 0;
    overflow: hidden;
    border: 1px solid rgba(225,225,225,.1);
    border-radius: 5px;
}
/*底部播放*/
.music_footer{
    position: absolute;
    height: 100px;
    width: 100%;
    left: 0;
    bottom: 0;
}
.control{
    height: 100%;
}
.play_btn{
    background: url("/img/player.png");
    opacity: 0.8;
}
.play_btn:hover{
    opacity: 1;
}
.con_btn{
    position: relative;
    width: 130px;
    float: left;
    height: 100%;
    margin:  0 10px;
}
.con_btn a{
    display: inline-block;
    position: absolute;
    top: 50%;
    cursor: pointer;
}
.btn_prev{
    left: 0;
    background-position: 0 -30px;
    width: 19px;
    height: 20px;
    margin-top: -10px;
}
.btn_play{
    left: 43%;
    width: 21px;
    height: 29px;
    margin-top: -14px;
}
.btn_next{
    right: 0;
    background-position: 0 -52px;
    width: 19px;
    height: 20px;
    margin-top: -10px;
}
.con_vol{
    height: 100%;
    width: 200px;
    float: right;
    margin: 0 10px;
}
.quiet{
    width: 60px;
    height: 100%;
    position: relative;
    float: left;
}
.btn_quiet{
    display: inline-block;
    position: absolute;
    top: 50%;
    cursor: pointer;
    right: 0;
    background-position: 0 -144px;
    width: 26px;
    height: 21px;
    margin-top: -10px;
}
.volume{
    height: 100%;
    margin-left: 60px;
    padding: 0 10px;
}
.volume_box{
    height: 100%;
    width: 100%;
    position: relative;
}
.volume_1{
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -1px;
    width: 100%;
    height: 2px;
    background: #808284;
    border-radius: 2px;
    cursor: pointer;
}
.volume_2{
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -1px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    cursor: pointer;
}
.volume_3{
    position: absolute;
    top: 50%;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
}
.progress_1{
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -1px;
    width: 100%;
    height: 2px;
    background: #808284;
    border-radius: 2px;
    cursor: pointer;
}
.progress_2{
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -1px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    cursor: pointer;
}
.progress_3{
    position: absolute;
    top: 50%;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
}
.progress{
    position: relative;
    height: 100%;
    margin-left: 170px;
    margin-right: 220px;
}